<script>
export default {
  name: 'about-setting',
};
</script>

<template>
  <div class="about-page">
    <div class="header">
      <h1>{{ $t('Setting.about.title') }}</h1>
      <p>{{ $t('Setting.about.description') }}</p>
    </div>

    <div class="content">
      <!-- 简介 -->
      <section class="section">
        <h2>{{ $t('Setting.about.sections.introduction.title') }}</h2>
        <p>
          {{ $t('Setting.about.sections.introduction.description') }}
        </p>
      </section>

      <!-- 使命与愿景 -->
      <section class="section">
        <h2>{{ $t('Setting.about.sections.missionVision.title') }}</h2>
        <p>
          {{ $t('Setting.about.sections.missionVision.description') }}
        </p>
      </section>

      <!-- 团队介绍 -->
      <section class="section">
        <h2>{{ $t('Setting.about.sections.team.title') }}</h2>
        <p>
          {{ $t('Setting.about.sections.team.description') }}
        </p>
      </section>

      <!-- 联系方式 -->
      <section class="section">
        <h2>{{ $t('Setting.about.contact.title') }}</h2>
        <p>{{ $t('Setting.about.contact.description') }}</p>
        <ul class="contact-info">
          <li>{{ $t('Setting.about.contact.email') }}：<a href="mailto:contact@example.com">contact@example.com</a></li>
          <li>{{ $t('Setting.about.contact.phone') }}：+86 123 4567 8901</li>
          <li>{{ $t('Setting.about.contact.address.name') }}：{{ $t('Setting.about.contact.address.value') }}</li>
        </ul>
      </section>
    </div>
  </div>
</template>

<script setup>

</script>

<style scoped>
@import "/src/css/setting/about-setting.css";
</style>
